<template>
  <d2-container class="wl" style="margin-top:20px !important;">
    <div class="b-box-26">
      <div class="tit">
        <span>
        物流清单
        </span>
        <p></p>
      </div>

      <div class="boxnav">
        <div class="search">
          <div class="search-date">
            <el-date-picker
              v-model="logisticsListDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>

          <div class="search-type">
            <el-select v-model="logisticsTypeValue" :multiple="false" placeholder="请选择">
              <el-option
                v-for="item in logisticsType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div class="search-btn">
            <el-button type="primary" icon="el-icon-search" @click="search_before">搜索</el-button>
          </div>

          <div class="search-down">
            <el-button type="primary" icon="el-icon-download" @click="downloadDialogVisible = true">下载</el-button>
          </div>
        </div>
        <div class="logistics-list-table">
          <div class="logistics-list-table-header">
            <div class="logistics-list-table-th" style="width:6%"><input type="checkbox" v-model="allLogisticsListCheck" /></div>
            <div class="logistics-list-table-th" style="width:18%">运单号</div>
            <div class="logistics-list-table-th" style="width:18%">客户单号</div>
            <div class="logistics-list-table-th" style="width:43%">目的地/当前位置</div>
            <div class="logistics-list-table-th" style="width:15%">当前温度</div>
          </div>
          <div class="table-row" style="  height: 567px;">
            <div class="logistics-list-table-body" v-for="(item, index) in logisticsList" :key="item.id"  >
              <div class="logistics-list-table-td" style="width:6%"><input type="checkbox" v-model="item.isChecked" :vaule="item.ydh" /></div>
                <div class="logistics-list-table-td" style="width:18%">
                <div v-if="item.wlstatsimp == '已签收'" style="color: rgb(35, 142, 35);">{{item.ydh}}</div>
                <div v-if="item.wlstatsimp == '待签收'" style="color:rgb(255, 127, 0);">{{item.ydh}}</div>
                <div v-if="item.wlstatsimp == '待配送'" style="color:rgb(216, 216, 191);">{{item.ydh}}</div>
                <div v-if="item.wlstatsimp == '运输中'" style="color:rgb(112, 147, 219)">{{item.ydh}}</div>
                </div>
                <div class="logistics-list-table-td" style="width:18%">{{item.cuswbno}}</div>
                <div class="logistics-list-table-td" style="width:43%;cursor:pointer" @click="click_info(item)">{{item.mddpro}}-{{item.mddcit}}/{{item.wlpos}}</div>
                <div class="logistics-list-table-td" style="width:15%">{{item.sswdtxt}}</div>
              </div>
            </div>
          </div>
        </div>
    </div>

    <div class="b-box" :style="{width:baidu_map_width+'%',opacity:'0.7',transition: 'width '+ baidu_map_width_transition,'transition-delay': baidu_map_width_delay,'-webkit-transition-delay': baidu_map_width_delay}">
      <baidu-map class="bm-view" :zoom="zoom" :center="center" @ready="mapHandler" inertial-dragging :scroll-wheel-zoom="true" :mapStyle="mapStyle">
        <bm-marker v-for="(item,index) in bills_mark" :key="index" :position="{lng: item.wljwd.lng, lat: item.wljwd.lat}" :dragging="false" @click="lookDetail(index)" :icon="{url: mark_url, size: {width: 60, height: 65}}">
          <bm-info-window :title="'运单号:'+item.ydh" :position="{lng: item.wljwd.lng, lat: item.wljwd.lat}" :offset="{width: -20, height: -32}"  :show="bills_mark[index].showFlag" @close="infoWindowClose(index)" @open="infoWindowOpen(index)">
            <p>经度: {{item.wljwd.lng}}</p>
            <p>维度:{{item.wljwd.lat}}</p>
            <p>当前位置:{{item.wlpos}}</p>
            <p>当前温度:{{item.sswdtxt}}</p>
          </bm-info-window>
        </bm-marker>
        <template v-if="polyline.length > 0" v-for="path in polyline">
          <new-polyline  :path="path" stroke-color="#0091ea" :stroke-opacity="1" :stroke-weight="6" :editing="false"></new-polyline>    
        </template>

        <bm-marker v-if="polyline.length > 0" key="start" :position="{lng: startPolyline.lng, lat: startPolyline.lat}" :dragging="false" :icon="{url: start_mark_url, size: {width: 32, height: 32}}">
        </bm-marker>
        <bm-marker v-if="polyline.length > 0" key="end" :position="{lng: endPolyline.lng, lat: endPolyline.lat}" :dragging="false" :icon="{url: end_mark_url, size: {width: 32, height: 32}}">
        </bm-marker>
        <template v-for="path in polyline_warn">
          <new-polyline  :path="path" stroke-color="red" :stroke-opacity="1" :stroke-weight="6" :editing="false"></new-polyline>    
        </template>

        
      </baidu-map>
    </div>

    <transition name="el-zoom-in-center">
    <div v-show="right_show">

    <div class="b-box" style="width: 26%">
      <div class="tit">
        <span>
        总计运单数
        </span>
        <p></p>
      </div>
      <div class="yqlist">
        <div class="total_num">
        <p>{{index_data.total_bills}}</p><span>单</span>
        </div>
      </div>
    </div>

    <div class="b-box" style="width: 26%">
      <div class="tit">
        <span>
        基本总数
        </span>
        <p></p>
      </div>
      <div class="yqlist">
        <ul class="clearfix">
          <li>
          <div class="yq" style="color:#238E23" id="yq">{{index_data.done_sign}}</div>
          <span style="color:#238E23">已签收</span></li>
                        <li>
          <div class="yq" style="color:#FF7F00">{{index_data.tobe_sign}}</div>
          <span style="color:#FF7F00">待签收</span></li>
                        <li>
          <div class="yq" style="color:#D8D8BF">{{index_data.tobe_bills}}</div>
          <span style="color:#D8D8BF">待配送</span></li>
                        <li>
          <div class="yq" style="color:#7093DB">{{index_data.in_bills}}</div>
          <span style="color:#7093DB">运输中</span></li>
        </ul>
      </div>
    </div>

    <div class="b-box" style="width: 26%">
      <div class="tit">
        <span>
        预警事件
        </span>
        <p></p>
      </div>
      <div class="boxnav" style="height:252px">
        <div class="logistics-list-table">
          <div class="logistics-list-table-header">
            <div class="logistics-list-table-th" style="width:18%">事件</div>
            <div class="logistics-list-table-th" style="width:32%">预警时间</div>
            <div class="logistics-list-table-th" style="width:32%">运单号</div>
            <div class="logistics-list-table-th" style="width:18%">物流设备</div>
          </div>
          <div class="table-row" style="  height: 177px;">
          <div class="logistics-list-table-body" style="background-color:red" v-for="(item, index) in warnList" :key="item.id">
              <div class="logistics-list-table-td" style="width:18%">{{item.isalert}}</div>
              <div class="logistics-list-table-td" style="width:32%">{{item.sswdsj}}</div>
              <div class="logistics-list-table-td" style="width:32%">{{item.ydh}}</div>
              <div class="logistics-list-table-td" style="width:18%">{{item.wlzzmc}}</div>
            </div>
            </div>
        </div>
      </div>
    </div>
    </div>
    </transition>

    <div class="b-box" style="width: 100%;margin-top:15px;">
      <div class="tit">
        <span>
        温度报告
        </span>
        <p></p>
      </div>

      <div id="temp_line" :style="{width: pxData.wpx+'px',height: '300px'}"></div>
    </div>


    <el-dialog
      title="选择需要下载的内容"
      width="600px"
      :visible.sync="downloadDialogVisible"
      :append-to-body="true">
      <div style="margin-top: 5px;">
        <el-checkbox-group v-model="downloadChecked" size="small">
          <el-checkbox label="1" border>现场签收照片</el-checkbox>
          <el-checkbox label="2"  border>高拍照片</el-checkbox>
          <el-checkbox label="3"  border>全程温度</el-checkbox>
        </el-checkbox-group>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="downloadDialogVisible = false">取 消</el-button>
        <el-button type="success" @click="downloadSubmit">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="温度预警"
      :visible.sync="dialogVisibleWarm"
      custom-class="warm_style"
      width="600px">
      <div v-for="(item, index) in warnList" style="border: 1px solid #ccc;
    padding: 5px 10px;margin-bottom:10px;">
      <p>事件名称:{{item["isalert"]}}</p>
      <p>预警时间:{{item["sswdsj"]}}</p>
      <p>预警设备:{{item["wlzzmc"]}}</p>
      <p>关联运单号:{{item["ydh"]}}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogVisibleWarm = false">确 定</el-button>
      </span>
    </el-dialog>

  </d2-container>
</template>

<script>
import draggable from 'vuedraggable'
import VueGridLayout from 'vue-grid-layout'
import initData from './init.js'
import newPolyline from '@/components/new-polyline/newPolyline'
import { Loading } from 'element-ui';

import { request } from '@/api/service'

export default {
  name: 'indexComponent',
  components: {
    draggable,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    newPolyline,
    Loading
  },
  data () {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 6); // 设置为最近7天
    return {
      defaultLayout: initData,
      layout: [],
      colNum: 48,
      pxData: {},
      downloadDialogVisible:false,
      downloadChecked:[],
      logisticsListDate: [this.formatDate(startDate), this.formatDate(endDate)],
      logisticsList: [],
      warnList: [
      ],
      logisticsType: [
        {
          value: 0,
          label: '全部'
        },
         {
          value: 1,
          label: '已签收'
        }, 
        {
          value: 2,
          label: '待签收'
        }, 
        {
          value: 3,
          label: '待配送'
        }, 
        {
          value: 4,
          label: '运输中'
        }
      ],
      logisticsTypeValue: 0,
      map:"",
      zoom:0,
      center:"",
      mapStyle: {
        styleJson: [{
            "featureType": "estatelabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#8d694eff"
            }
        }, {
            "featureType": "restaurantlabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "restaurantlabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "lifeservicelabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "lifeservicelabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "transportationlabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "transportationlabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }, {
            "featureType": "financelabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "financelabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "land",
            "elementType": "geometry",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "building",
            "elementType": "geometry.topfill",
            "stylers": {
                "color": "#e7dfd6ff"
            }
        }, {
            "featureType": "building",
            "elementType": "geometry.sidefill",
            "stylers": {
                "color": "#f4ebe2ff"
            }
        }, {
            "featureType": "building",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#b9a797ff"
            }
        }, {
            "featureType": "estatelabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ebe1d8ff"
            }
        }, {
            "featureType": "estatelabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "estatelabel",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 28
            }
        }, {
            "featureType": "manmade",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#72533aff"
            }
        }, {
            "featureType": "manmade",
            "elementType": "geometry",
            "stylers": {
                "color": "#ecececff"
            }
        }, {
            "featureType": "manmade",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 36
            }
        }, {
            "featureType": "manmade",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#b6997fff"
            }
        }, {
            "featureType": "green",
            "elementType": "geometry",
            "stylers": {
                "color": "#ecececff"
            }
        }, {
            "featureType": "education",
            "elementType": "geometry",
            "stylers": {
                "color": "#ecececff"
            }
        }, {
            "featureType": "medical",
            "elementType": "geometry",
            "stylers": {
                "color": "#ecececff"
            }
        }, {
            "featureType": "scenicspots",
            "elementType": "geometry",
            "stylers": {
                "color": "#ecececff"
            }
        }, {
            "featureType": "entertainment",
            "elementType": "geometry",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "estate",
            "elementType": "geometry",
            "stylers": {
                "color": "#ecececff"
            }
        }, {
            "featureType": "shopping",
            "elementType": "geometry",
            "stylers": {
                "color": "#ecececff",
                "visibility": "on"
            }
        }, {
            "featureType": "transportation",
            "elementType": "geometry",
            "stylers": {
                "color": "#ecececff"
            }
        }, {
            "featureType": "transportation",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#72533aff"
            }
        }, {
            "featureType": "transportation",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#b6997fff"
            }
        }, {
            "featureType": "transportation",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 36
            }
        }, {
            "featureType": "medical",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#72533aff"
            }
        }, {
            "featureType": "medical",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#b6997fff"
            }
        }, {
            "featureType": "medical",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 36
            }
        }, {
            "featureType": "education",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#72533aff"
            }
        }, {
            "featureType": "education",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#b6997fff"
            }
        }, {
            "featureType": "education",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 36
            }
        }, {
            "featureType": "carservicelabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "carservicelabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "shoppinglabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "hotellabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "governmentlabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "companylabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "businesstowerlabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "entertainmentlabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "entertainmentlabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "medicallabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "educationlabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "scenicspotslabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "airportlabel",
            "elementType": "labels.icon",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "airportlabel",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 36
            }
        }, {
            "featureType": "airportlabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#72533aff"
            }
        }, {
            "featureType": "airportlabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#b6997fff"
            }
        }, {
            "featureType": "scenicspotslabel",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 28
            }
        }, {
            "featureType": "scenicspotslabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#4a4a4aff"
            }
        }, {
            "featureType": "scenicspotslabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "educationlabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#8d694eff"
            }
        }, {
            "featureType": "educationlabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ebe1d8ff"
            }
        }, {
            "featureType": "educationlabel",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 26
            }
        }, {
            "featureType": "medicallabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#8d694eff"
            }
        }, {
            "featureType": "medicallabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ebe1d8ff"
            }
        }, {
            "featureType": "medicallabel",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 24
            }
        }, {
            "featureType": "businesstowerlabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ebe1d8ff"
            }
        }, {
            "featureType": "businesstowerlabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#8d694eff"
            }
        }, {
            "featureType": "businesstowerlabel",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 24
            }
        }, {
            "featureType": "companylabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "hotellabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#8d694eff"
            }
        }, {
            "featureType": "hotellabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ebe1d8ff"
            }
        }, {
            "featureType": "hotellabel",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 24
            }
        }, {
            "featureType": "shoppinglabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#8d694eff"
            }
        }, {
            "featureType": "shoppinglabel",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ebe1d8ff"
            }
        }, {
            "featureType": "transportationlabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#4a4a4aff"
            }
        }, {
            "featureType": "transportationlabel",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 24
            }
        }, {
            "featureType": "scenicspots",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#72533aff"
            }
        }, {
            "featureType": "scenicspots",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#b6997fff"
            }
        }, {
            "featureType": "scenicspots",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 36
            }
        }, {
            "featureType": "governmentlabel",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#4a4a4aff"
            }
        }, {
            "featureType": "scenicspotslabel",
            "elementType": "labels",
            "stylers": {
                "visibility": "off"
            }
        }, {
            "featureType": "district",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "district",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#72533aff",
                "weight": 3.5
            }
        }, {
            "featureType": "town",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#72533aff",
                "weight": 3
            }
        }, {
            "featureType": "town",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "village",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ffffffff",
                "weight": 2.5
            }
        }, {
            "featureType": "village",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#72533aff",
                "weight": 40
            }
        }, {
            "featureType": "village",
            "elementType": "labels.text",
            "stylers": {
                "fontsize": 20
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#fdf0daff"
            }
        }, {
            "featureType": "highway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#ffd993ff"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#000000ff"
            }
        }, {
            "featureType": "highway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#fdf0daff"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#ffd993ff"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#000000ff"
            }
        }, {
            "featureType": "nationalway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "geometry.stroke",
            "stylers": {
                "color": "#ffd993ff"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#fdf0daff"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "labels.text.fill",
            "stylers": {
                "color": "#000000ff"
            }
        }, {
            "featureType": "provincialway",
            "elementType": "labels.text.stroke",
            "stylers": {
                "color": "#ffffffff"
            }
        }, {
            "featureType": "subway",
            "elementType": "geometry.fill",
            "stylers": {
                "color": "#f5a117ff"
            }
        }, {
            "featureType": "manmade",
            "elementType": "labels",
            "stylers": {
                "visibility": "on"
            }
        }]
      },
      bills_mark:[],
      marks:[],
      mark_url: this.$baseUrl + "image/s_ico4.png",
      start_mark_url: this.$baseUrl + "image/carStart.png",
      end_mark_url: this.$baseUrl + "image/carStop.png",
      polyline:[
      ],
      polyline_warn:[],
      startPolyline:{},
      endPolyline:{},
      icons:[],
      temp_line: null,
      drawLineData:[
        
      ],
      wdmin:0,
      wdmax:0,
      markerYdh:"",
      index_data:{
        total_bills:0,
        tobe_bills:0,
        tobe_sign:0,
        done_sign:0,
        in_bills:0
      },
      fullscreenLoading:false,
      right_show:true,
      baidu_map_width: "48",
      baidu_map_width_delay: ".5s",
      baidu_map_width_transition: ".5s",
      dialogVisibleWarm: false,
      soundurl: this.$baseUrl + "video/alert.mp3",
      warn_audio: ""
    }
  },
  async created () {
    this.layout = await this.$store.dispatch('d2admin/db/get', {
      dbName: 'sys',
      path: 'grid-layout',
      defaultValue: JSON.parse(JSON.stringify(this.defaultLayout)),
      user: true
    }, { root: true })
  },
  mounted () {
    this.$emit('on-mounted')
    this.search_logistics()

    this.warn_audio =new Audio(this.soundurl);

    this.temp_line = this.$echarts.init(document.getElementById('temp_line'))
    // this.drawLine()


    this.intervalId = setInterval(() => {
      this.search_logistics()

      if(this.markerYdh){
        this.click_info(this.markerYdh)
      }
    }, 1000*60*5); // 每1000毫秒执行一次
  },
  computed: {
    allLogisticsListCheck: {
      get(){
        return this.logisticsList.every(item => item.isChecked)
      },
      set(checked){
        if (checked){
          // 所有选项都要被选中
          this.logisticsList.forEach(element => {
            element.isChecked = true
          });
        }
        else{
          this.logisticsList.forEach(item => item.isChecked = false)
        }
      }
    },
  },
  watch: {
    marks(n,o){
      if(!this.markerYdh){
        var view = this.map.getViewport(eval(n))
        this.zoom = view.zoom;
        this.center = view.center;
      }
      
    },
    polyline(n,o){
      if(n){
        var view = this.map.getViewport(eval([this.startPolyline,this.endPolyline]))
        this.zoom = view.zoom;
        this.center = view.center;
      }
      
    },
    warnList(n,o){
      if(n.length>0){
         this.dialogVisibleWarm = true
      }
      
    },
    dialogVisibleWarm(n,o){
      if (this.dialogVisibleWarm == true){
        console.log("start")
        this.$nextTick(function(){
          this.warn_audio.play();
        })
        
        
      }else{
        console.log("end")
        this.$nextTick(function(){
          this.warn_audio.close();
        })
        
      }
    }
  },
  methods: {
    getLayoutElementNumber (elementName) {
      return elementName + this.layout.length
    },


    // 设置实际的宽度和高度
    containerResizedEvent: function (i, newH, newW, newHPx, newWPx) {
      this.layout.map(val => {
        if (val.i === i) {
          this.$set(this.pxData, val.i, {
            hpx: Number(newHPx),
            wpx: Number(newWPx)
          })
        }
      })
    },

    mapHandler({BMap, map}){
      this.map = map
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
        scale: 0.5, // 图标缩放大小
        strokeColor: "#fff", // 设置矢量图标的线填充颜色
        strokeWeight: "3" // 设置线宽
      });
      var icons = new BMap.IconSequence(sy, "5%", "10%");
      this.icons.push(icons)
    },

    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      // 绘制图表
      const xAxisData = this.drawLineData.map(item => item.temp_time)
      const seriesDataT1 = this.drawLineData.map(item => item.t1)
      const seriesDataT2 = this.drawLineData.map(item => item.t2)
      const seriesDataT3 = this.drawLineData.map(item => item.t3)

      const option = {
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
           },
            tooltip : {
                trigger: 'axis',
                show:false,
            },
            legend: {
                data:['T1','T2','T3'],
                textStyle: {                            //图例文字的样式
                color: '#fff',               //图例文字颜色
                fontSize: 12                      //图例文字大小
            },
            },
            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : xAxisData
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value} °C'
                    },
                    splitLine: { 
                        show: true
                    },
                }
            ],
            series : [
                {
                    name:'T1',
                    type:'line',
                    symbol: "none",
                    data: seriesDataT1,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {
                              yAxis: this.wdmax, // 横坐标的值，决定纵向辅助线在x轴的位置
                              label:{
                                formatter: '上限',
                              },
                            },
                            {
                              yAxis: this.wdmin, // 横坐标的值，决定纵向辅助线在x轴的位置
                              label:{
                                formatter: '下限',
                              },
                            },
                        ]
                    }
                },
                {
                    name:'T2',
                    type:'line',
                    symbol: "none",
                    data: seriesDataT2,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                },
                {
                    name:'T3',
                    type:'line',
                    symbol: "none",
                    data: seriesDataT3,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                }
            ]
        }       
      

      this.temp_line.setOption(option)
    },

    lookDetail(index){
      this.bills_mark[index].showFlag = this.bills_mark[index].showFlag == true ? false : true;
      this.bills_mark = Object.assign({}, this.bills_mark)
    },
    infoWindowClose (index) {
      this.bills_mark[index].showFlag = false
      this.bills_mark = Object.assign({}, this.bills_mark)
    },
    infoWindowOpen (index) {
        this.bills_mark[index].showFlag  = true
        this.bills_mark = Object.assign({}, this.bills_mark)
    },

    // 时间格式化
    formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();
        var h = date.getHours();
        if (mymonth < 10) {
          mymonth = "0" + mymonth;
        }
        if (myweekday < 10) {
          myweekday = "0" + myweekday;
        }
        // h = h < 10 ? "0" + h : h;
        // var m = date.getMinutes();
        // m = m < 10 ? "0" + m : m;
        // var s = date.getSeconds();
        // s = s < 10 ? "0" + s : s;
        return (
          myyear + "-" + mymonth + "-" + myweekday
        );
    },

    // getBillsList () {
      
    //   var url = '/api/getwaybillstatuslist/'
    //   request({ url: url }).then(ret => {
    //   var billsList = []
    //   for (const billsItem of ret.data) {
    //     billsItem["isChecked"] = false

    //     if(billsItem["sswdtxt"] == 'N/A/N/A/N/A'){
    //       billsItem["sswdtxt"] = '-'
    //     }

    //     if(billsItem["cuswbno"] == '/'){
    //       billsItem["cuswbno"] = '-'
    //     }

    //     billsList.push(billsItem)
    //   }

    //     this.logisticsList = billsList
    //   })
    // },
    search_before(){
      this.markerYdh = ""
      this.polyline = ""
      this.polyline_warn = ""
      this.drawLineData = []
      this.drawLine()
      this.search_logistics()
    },

    search_logistics() {
      var url = '/api/getwaybillstatuslist/'
      request({ url: url ,params: { start_time: this.logisticsListDate[0], end_time: this.logisticsListDate[1],type: this.logisticsTypeValue}}).then(ret => {
      var billsList = []
      var warnList = []
      var bills_mark = []
      var marks = []
      var total_bills = 0
      var tobe_bills = 0
      var tobe_sign = 0
      var done_sign = 0
      var in_bills = 0
      for (const billsItem of ret.data) {
        billsItem["isChecked"] = false

        if(billsItem["sswdtxt"] == 'N/A/N/A/N/A'){
          billsItem["sswdtxt"] = '-'
        }

        if(billsItem["cuswbno"] == '/'){
          billsItem["cuswbno"] = '-'
        }

        billsList.push(billsItem)

        total_bills++

        if(billsItem["wlstatsimp"] == "已签收"){
          done_sign++
        }else if(billsItem["wlstatsimp"] == "待签收"){
          tobe_sign++
        }else if(billsItem["wlstatsimp"] == "待配送"){
          tobe_bills++
        }else if(billsItem["wlstatsimp"] == "运输中"){
          in_bills++
        }

        if(["预警","报警"].includes(billsItem["isalert"])){
          warnList.push(billsItem)
        }

        if(billsItem["wljwd"]){
          var wljwd = JSON.parse(billsItem["wljwd"])
          bills_mark.push({ydh:billsItem["ydh"],wljwd:{lng:wljwd[0],lat:wljwd[1]},wlpos:billsItem["wlpos"],sswdtxt:billsItem["sswdtxt"],showFlag:false})
          marks.push({lng:wljwd[0],lat:wljwd[1]})
        }
      }

        
        this.logisticsList = billsList
        this.warnList = warnList
        this.bills_mark = bills_mark
        this.marks = marks
        this.index_data.total_bills = total_bills
        this.index_data.done_sign = done_sign
        this.index_data.tobe_sign = tobe_sign
        this.index_data.tobe_bills = tobe_bills
        this.index_data.in_bills = in_bills

        // this.polyline = []
        // this.polyline_warn = []
        // this.drawLineData = []

      })
    },

    downloadSubmit(){
      var ydh_list = []
      for (const billsItem of this.logisticsList) {
        if(billsItem.isChecked == true){
          ydh_list.push(billsItem["ydh"])
        }
      }
      var download_checked = []
      for (const checked of this.downloadChecked) {
        download_checked.push(Number(checked))
      }

      var that = this
      var url = '/api/downloadFile/'
      request({ url: url ,params: { ydh_list: JSON.stringify(ydh_list), download_checked: JSON.stringify(download_checked)}}).then(ret => {
        that.downloadDialogVisible = false
        that.$message.info('任务正在处理中，请至下载中心下载文件！')
      })
    },

    click_info(info){
      let loadingInstance1 = Loading.service({ fullscreen: true,background: 'rgba(255, 255, 255, .5)'});
      var url = '/api/getwaybillstatusinfo/'
      var polyline_info = []
      var polyline_points = []
      // var polyline_warn_arr = [[{lng:103.98065,lat:30.558204},{lng:103.980416,lat:30.558622}]]

      var polyline_warn_arr = []

      var drawLine_data = []

      this.wdmin = info.wdmin
      this.wdmax = info.wdmax

      // #标记运单号
      this.markerYdh = info
      request({ url: url ,params: { ydh: info.ydh}}).then(ret => {
        for (const infoItem of ret.data) {
          if(infoItem["lat"] && infoItem["lng"]){
            polyline_info.push({lng: parseFloat(infoItem["lng"]), lat: infoItem["lat"],t1:infoItem["t1"]})
          }

          if(infoItem["t1"] || infoItem["t2"] || infoItem["t3"]){
            drawLine_data.push({temp_time:infoItem["dt"],t1:infoItem["t1"],t2:infoItem["t2"],t3:infoItem["t3"]})
          }
        }


        // --------------------
        polyline_info = polyline_info.reverse()
        for (var i = 0; i < polyline_info.length; i++){

          polyline_points.push({lng: polyline_info[i].lng, lat: polyline_info[i].lat})

          if((polyline_info[i].t1 < this.wdmin || polyline_info[i].t1 > this.wdmax) && i < polyline_info.length-1 ){
            
            polyline_warn_arr.push([{lng: polyline_info[i].lng, lat: polyline_info[i].lat},{lng: polyline_info[i+1].lng, lat: polyline_info[i+1].lat}])
          }
        }

        if(polyline_points.length == 0){
          this.$message.info('该运单轨迹尚未生成')
        }

        // 分割线数组
        var polyline_points_chunks = []
        var chunks_size = 100
    
        for (let i = 0; i < polyline_points.length; i += chunks_size) {
          polyline_points_chunks.push(polyline_points.slice(i, i + chunks_size));
        }

        // 拼接，首位相连
        for (var i = 0; i < polyline_points_chunks.length; i++){
          if(i+1 < polyline_points_chunks.length){
            polyline_points_chunks[i].push(polyline_points_chunks[i+1][0])
          }
        }

        this.polyline = polyline_points_chunks
        this.polyline_warn = polyline_warn_arr
  

        this.startPolyline = polyline_points[0]
        this.endPolyline = polyline_points[polyline_points.length-1]
  
        // -------------------

        this.drawLineData = drawLine_data

        this.drawLine()
        loadingInstance1.close()
      })
      
    },
    changeRightShow(){
      this.right_show = !this.right_show

      if(this.right_show == true){
        this.baidu_map_width = "48"
        this.baidu_map_width_delay = '0s'
        this.baidu_map_width_transition = '0s'
      }else{
        this.baidu_map_width = "74"
        this.baidu_map_width_delay = '.5s'
        this.baidu_map_width_transition = '.5s'
      }
    }



  },
  beforeDestroy() {
    // 清除定时任务
    clearInterval(this.intervalId);
  }
}
</script>

<style lang="scss">
@font-face{font-family:electronicFont;src:url('~@/assets/fonts/DS-DIGIT.TTF')}


img {
    max-width: none !important;
}

.el-dialog__header{
  background: #333366;
}
.warm_style .el-dialog__header{
 background: red;
}
.warm_style .el-dialog__headerbtn .el-dialog__close{
color: #fff
}
.el-dialog__title{
  color: #fff
}

.el-dialog__body {
  border-bottom:1px solid #333366
}
.dialog-footer .el-button--success{
  background-color: #333399;
  border-color: #333399;
}

.dialog-footer .el-button--success:hover{
  background-color: #333366;
  border-color: #333366;
}

.wl .el-range-editor .el-range-input {
 background: transparent;
 font-size: 12px;
 line-height: 24px;
 color: rgba(255, 255, 255, .8)
}

.wl .el-date-editor .el-range__icon {
  line-height: 24px !important;
}

.wl .el-date-editor .el-range-separator {
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  line-height: 24px;
  width: 20px
}

.wl .el-popper[x-placement^=bottom] { 
  background: rgb(5, 18, 81);
  color: rgba(255, 255, 255, .8);
}

.el-date-table th {
  color: rgba(255, 255, 255, .8);
}

.wl .el-input__inner {
  height: 24px;
  line-height: 24px;
  color: rgba(255, 255, 255, .8);
  background: transparent;
  border: 0;
  padding: 0 8px;
}

.wl .el-input__icon {
  font-size: 12px;
  line-height: 24px;
  width: 20px
}

.wl .el-input--default {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}

.wl .el-select .el-input .el-select__caret {
  height: 24px;
  line-height: 24px;
}

.wl .el-select-dropdown__item.selected {
  background: #333366;
  color: rgba(255, 255, 255, .8)
}

.wl .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: #333366;
}

.wl .el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, .8)
}

.wl .el-input--suffix .el-input__inner {
  padding-right: 20px;
}

.wl .el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
  background: #333366;
  color: rgba(255, 255, 255, .8)
}

.wl .el-date-editor .el-range__close-icon {
  width: 1px;
}

.clearfix {
  background: url("~@/assets/image/gz.png") repeat;
}

.clearfix:after, .clearfix:before {
    display: table;
    content: " ";
}

.clearfix:after {
    clear: both;
}

.clearfix:after, .clearfix:before {
    display: table;
    content: " ";
}

.yqlist li {
    float: left;
    width: 50%;
    padding: 10px 0;
    text-align: center;
}

.yq {
    width: 100px;
    height: 100px;
    margin: 0 auto 5px auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: electronicFont;
}

.yq:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background: url("~@/assets/image/img1.png") center center;
    border-radius: 100px;
    background-size: 100% 100%;
    opacity: .5;
    left: 0;
    top: 0;
    animation: myfirst2 15s infinite linear;
}

.yq:after {
    position: absolute;
    width: 86%;
    background: url("~@/assets/image/img2.png") center center;
    border-radius: 100px;
    background-size: 100% 100%;
    opacity: .3;
    height: 86%;
    content: "";
    left: 7%;
    top: 7%;
    animation: myfirst 15s infinite linear;
}

li {
    list-style-type: none;
}

.yqlist li span {
    font-size: 14px;
}

.total_num {
  width: 100%;
  height: 50px;
  background: url("~@/assets/image/gz.png") repeat;
}

.total_num p{
  font-size: 36px;
  font-family: electronicFont;
  color: #70DB93;
  height:50px;
  line-height:50px;
  display: block;
  float:left
}

.total_num span {
  font-size: 20px;
  padding-left:10px;
  height:50px;
  line-height:50px;
  color: #70DB93;
  display:block;
  float:left
  
  
}


@keyframes myfirst
{
to { transform: rotate(-360deg)}
}
@keyframes myfirst2
{
to { transform: rotate(360deg)}
}
</style>



<style scoped lang="scss">
::v-deep .d2-container-full__body {
  padding: 0!important;
}


input {
  -webkit-appearance:auto !important
}

input[type="checkbox" i] {
  margin:0 !important
}

*::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    opacity: 0.5;
    background-color: transparent;
    color: transparent
}

.b-box-26{
  width:26%;
  padding:0 20px;
  float:left;
}
.tit{
  display:flex;
  align-items: flex-end;
}

.tit span {
    background: url("~@/assets/image/line1.png") no-repeat bottom right;
    font-size: 20px;
    white-space: nowrap;
    padding-bottom: 10px;
    padding-right: 20px;
    color:#fff
}

.tit p {
    background: url("~@/assets/image/line2.png") no-repeat bottom right;
    width: 100%;
    height: 13px;
    margin-bottom: 5px;
    opacity: .5;
}

.boxnav {
  height: 100%;
  padding: 10px 5px;
  display: block;
  height: 664px;

}

.table-row {
  overflow: hidden;
  overflow-y: scroll;
  width: 100%
}

.boxnav .search{
  width: 100%;
  float: left
}

.boxnav .search-date {
  width: 52%;
  float: left;
}

.boxnav .search-type {
  width: 20%;
  float: left;
}

.el-date-editor--daterange.el-input__inner {
  width: auto;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0px;
  padding: 3px 5px;
}

.el-date-editor .el-range__close-icon {
  width: 10px;
}


.logistics-list-table{
  width: 100%
}

.logistics-list-table-header{
  width:100%
}

.logistics-list-table-body {
  width: 100%;
  float: left;
  border-bottom: 1px dotted #407abd;
}

.logistics-list-table-th {
    border-bottom: 1px solid #407abd;
    font-size: 12px;
    padding: 10px 0;
    color: rgba(255, 255, 255, .8);
    float: left;
    text-align:center;
    line-height:35px;
    font-weight: bold;
}

.logistics-list-table-td{
  font-size: 14px;
  padding: 10px 0px;
  color: rgba(255, 255, 255, 1);
  text-align:center;
  align-items: center;
  float: left;
  word-break: break-all; 
  font-size: 12px
}

.search-btn {
  width: 14%;
  float: left;
}

.el-button--primary {
  padding: 8px 5px;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  border: 0;
  font-size: 12px;
}

.el-button--primary:focus, .el-button--primary:hover {
  background: #333366;
  color: rgba(255, 255, 255, .8);
}

.search-down {
  width: 14%;
  float: left
}

.b-box{
  padding:0 20px;
  float:left;
}

.bm-view {
  height: 700px;
}
</style>
